<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/jquery-3.6.1.slim.min.js"></script>
    <script type="text/javascript" src="/webuploader.min.js"></script>
    <style>
        .webuploader-container {
            position: relative;
        }

        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px, 1px, 1px, 1px);
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #00b7ee;
            padding: 10px 15px;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }

        .webuploader-pick-hover {
            background: #00a2d4;
        }

        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events: none;
        }


        .uploadRecordContent {
            width: 100%;
        }

        .uploadRecordContent ul li span {
            width: 33.33%;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

        .uploadRecordContent ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            overflow: hidden;
        }

        .bigFileUpload {
            width: 80%;
            background-color: rgba(0 0 0 /15%);
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
<body>

<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
<script>
    var uploader = WebUploader.create({
        //是否开启自动上传
        auto: true,
        //文件地址
        swf: '/Uploader.swf',
        //服务上传地址
        server: 'http://localhost:28080/big/upload',
        //文件选择的按钮
        pick: '#picker',
        //文件是否压缩，默认jpg，会压缩
        resize: false,
        //是否支持选择多个
        multiple: true,
        //开启分片上传
        chunked: true,
        //上传并发数量
        threads: 20,
        //文件上传请求类型
        method: 'POST',
        //文件总大小
        fileSizeLimit: 10 * 1024 * 1024 * 1024,
        //单个文件大小
        fileSingleSizeLimit: 1024 * 1024 * 1024,
        //设置文件上传域name
        //fileVal: 'upload'
    })
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        var $list = $("#thelist");
        $list.append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css('width', percentage * 100 + '%');
    });
    uploader.on('uploadSuccess', function (file) {
        $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
        $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
    });

</script>
</body>
</html>